<template>
  <div class="p-30">
    <!-- 评论表格列表 -->
    <el-table
        :data="commentList"
        stripe
        row-key="creationTime"
        :tree-props="{children: 'reply', hasChildren: 'hasChildren'}">
      style="width: 100%">
      <el-table-column
          prop="talk_id"
          label="被评论讨论"
          width="100">
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容"
          width="700">
      </el-table-column>
      <el-table-column
          prop="name"
          label="评论者"
          width="90">
      </el-table-column>
      <el-table-column
          label="评论时间"
          width="180">
        <template v-slot="{row}">
          {{ $dayjs(row.creationTime * 1).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template v-slot="{row}">
          <el-button type="danger" @click="deleteComment(row)">违规</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 评论表格列表 end -->

    <!-- 分页器 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-show="total>limit"
        :page-size="limit"
        :current-page.sync="pageNo"
    ></el-pagination>
    <!-- 分页器 end-->
  </div>
</template>

<script>
import {mapState} from "vuex";
import {deleteComment} from "@/api/article";
export default {
  name: "TalkComment",
  data() {
    return {
      pageNo: 1,
      limit: 10
    }
  },
  mounted() {
    this.getAllTalkComment()
  },
  computed:{
    ...mapState('talk',['commentList','total'])
  },
  methods: {
    getAllTalkComment() {
      this.$store.dispatch('talk/getAllTalkComment', {
        pageNo: this.pageNo,
        limit: this.limit,
      })
    },
    // 删除评论 参数评论对象
    async deleteComment(comment){
      await deleteComment(comment);
      this.getAllTalkComment();
    }
  },
  watch:{
    pageNo(){
      this.getAllTalkComment();
    }
  }
}
</script>

<style scoped>

</style>